<template>
    <div class="leftNav2">
        <el-collapse accordion @change="changeCollapse">
        <!-- <el-collapse @change="changeCollapse"> -->
            <template v-for="(item, index) in navData.data">
                <el-collapse-item :name="index"
                    :class="{ 'nochildren': !item.children || item.children.length == 0, 'item_active': headIndex == index }">
                    <template #title>
                        <!-- <img src="@/assets/images/digitalProduction/down.png" alt=""> -->
                        <span>{{ item.name }}</span>
                    </template>
                    <template v-if="item.children && item.children.length > 0">
                        <div v-for="(item2, index2) in item.children" class="content_item"
                            :class="{ 'content_item_active': headIndex == index && contentIndex == index2 }"
                            @click="changeContentIndex(index, index2)">
                            <span>{{ item2.name }}</span>
                        </div>
                    </template>

                </el-collapse-item>
            </template>

        </el-collapse>
    </div>
</template>

<script setup lang="ts">
import router from '@/routes';
let navData = reactive({
    data: [
        {
            name: '垃圾给料系统',
            pageUrl: "/digitalProduction/rubbish",
            children: []
        },
        {
            name: '锅炉系统',
            pageUrl: "",
            children: [
                {
                    name: '焚烧炉总貌',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '锅炉燃烧系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '锅炉启动燃烧器系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '锅炉天然气系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '渗滤液回喷系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '主蒸汽系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '锅炉汽水系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '乙玦吹灰系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '炉排渣系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '一二次风及炉墙冷却系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '蒸汽吹灰系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '空气预热系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '锅炉液压系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
                {
                    name: '疏水排污系统',
                    pageUrl: "/digitalProduction/destructor",
                    children: []
                },
            ]
        },
        {
            name: '汽机系统',
            pageUrl: "",
            children: [
                {
                    name: '汽轮机本体系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '抽汽系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '除氧给水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '凝结水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '汽机本体疏水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '汽机润滑油系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'TSI系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '减温减压系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'EH油系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '轴封系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
            ]
        },
        {
            name: '公用系统',
            pageUrl: "",
            children: [
                {
                    name: '消防水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '工业水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '循环水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '空压机房压缩空气系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '应急除臭系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '渣坑除尘系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
            ]
        },
        {
            name: '烟气系统',
            pageUrl: "",
            children: [
                {
                    name: '半干法脱硫系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '石灰浆制备系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'SNCR系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'SCR系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '布袋除尘系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '飞灰输送系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '活性炭吸附系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '干法脱酸系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '飞灰固化系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
            ]
        },
        {
            name: '化水系统',
            pageUrl: "",
            children: [
                {
                    name: '汽水取样系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '炉内加药系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '循环水加药系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '湖水取水系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '超滤系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '反渗透系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'EDI系统',
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                
            ]
        },
        {
            name: '渗滤液系统',
            pageUrl: "",
            children: [
                {
                    name: '厌氧系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '硝化与反硝化系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '超滤系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '纳滤系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '物料膜减量系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: 'DTRO系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '反渗透系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '污泥脱水系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '沼气火炬系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '除臭系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '压缩空气系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '卸酸系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '加酸系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '卸碱系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '加药系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
                {
                    name: '曝气系统',
                    parentName: "渗滤液系统",
                    pageUrl: "/digitalProduction/engineSystem",
                    children: []
                },
            ]
        },
    ]
})

let headIndex = ref(-1);
let contentIndex = ref(-1);
let emit = defineEmits(['routeChange'])
//一级菜单切换事件
const changeCollapse = (val: any) => {

    if ((val || val === 0) && headIndex.value != val && (!navData.data[val] ||!navData.data[val].children || navData.data[val].children.length == 0)) {  
        window.BlackHole3D.BIM.setElemsValidState("", [], false);
        headIndex.value = val;
        emit('routeChange', navData.data[val])
        router.push(navData.data[val]?.pageUrl);
       
    }
}

//点击二级菜单
const changeContentIndex = (index: number, index2: number) => {
    console.log('index',index);
    console.log('index2',index2);
    window.BlackHole3D.BIM.setElemsValidState("", [], false);
    if (headIndex.value != index || contentIndex.value != index2) {
        headIndex.value = index;
        contentIndex.value = index2;
        emit('routeChange', navData.data[index].children[index2])
        router.push(navData.data[index].children[index2].pageUrl);
       
    }
}
</script>

<style lang="scss" scoped>
.leftNav2 {
    position: absolute;
    left: vh(43);
    top: vh(94);
    z-index: 9;
}

:deep(.el-collapse) {
    border: none;

    .el-collapse-item {
        // width: vh(189);
        // height: vh(30);


        .el-collapse-item__header {
            width: vh(189);
            height: vh(30);
            background-color: transparent;
            border: none;
            border-radius: 0;
            background: url(../../../assets/images/digitalProduction/mbg.png) no-repeat;
            background-size: 100% 100%;
            margin-bottom: vh(3);
            position: relative;
            padding-left: vh(21);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(14);
            color: #00E3FF;
            line-height: vh(30);

            .el-collapse-item__arrow {
                width: vh(6);
                height: vh(8);
                background: url(../../../assets/images/digitalProduction/down.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: vh(7);
                top: vh(11);

                svg {
                    display: none;
                }
            }

        }

        .el-collapse-item__wrap {
            border: none;
            padding-left: vh(10);
            background-color: transparent;

            .el-collapse-item__content {
                padding-bottom: 0;

                padding-left: vh(10);

                .content_item {
                    width: vh(169);
                    height: vh(24);
                    line-height: vh(24);
                    margin-bottom: vh(1);
                    padding-left: vh(21);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #00E3FF;
                    line-height: vh(24);
                    cursor: pointer;
                    background: url(../../../assets/images/digitalProduction/mbg_2.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
        &.is-active {
            .el-collapse-item__header {
                margin-bottom: vh(1);
            }
        }

        &.nochildren {
            .el-collapse-item__header {
                margin-bottom: vh(3);
                .el-collapse-item__arrow {
                    display: none;
                }
            }

        }

        &.item_active {
            .el-collapse-item__header {
                background: url(../../../assets/images/digitalProduction/mbg-act.png) no-repeat;
                color: #FFCC00;
                .el-collapse-item__arrow {
                    background: url(../../../assets/images/digitalProduction/down-act.png) no-repeat;
                }
            }

            .el-collapse-item__wrap {

                .el-collapse-item__content {

                    .content_item {
                        &.content_item_active{
                            color: #FFCC00;
                        }
                        
                    }
                }
            }
        }

    }




}
</style>
<style lang="scss">
button:focus,
button:focus-visible {
    outline: none;
}
</style>
